
<template>
  <div class="execution">
    <el-dialog
      :title="'预览数据'"
      :visible="!!previewTable"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      width="80%"
    >
      <Preview
        v-if="previewTable !== null"
        @close="previewTable = null"
        :target="previewTable"
      />
    </el-dialog>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :summary-method="(e)=>summaryMethod(e, tableOption)"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @selection-change="selectionChange"
      >
        <template
          slot="lineGroup1_title1_diffMoney"
          slot-scope="{row}"
        >
          <el-link
            type="primary"
            @click="preview(row.lineGroup1_title1_diffUrl, row)"
          >{{row.lineGroup1_title1_diffMoney | rcaNumberFormat}}</el-link>
        </template>
        <template
          slot="lineGroup1_title2_diffMoney"
          slot-scope="{row}"
        >
          <el-link
            type="primary"
            @click="preview(row.lineGroup1_title2_diffUrl, row)"
          >{{row.lineGroup1_title2_diffMoney | rcaNumberFormat}}</el-link>
        </template>
        <template
          slot="lineGroup1_title3_diffMoney"
          slot-scope="{row}"
        >
          <el-link
            type="primary"
            @click="preview(row.lineGroup1_title3_diffUrl, row)"
          >{{row.lineGroup1_title3_diffMoney | rcaNumberFormat}}</el-link>
        </template>
        <template
          slot="lineGroup2_title2_diffMoney"
          slot-scope="{row}"
        >
          <el-link
            type="primary"
            @click="preview(row.lineGroup2_title2_diffUrl, row)"
          >{{row.lineGroup2_title2_diffMoney | rcaNumberFormat}}</el-link>
        </template>
        <template
          slot="lineGroup2_title3_diffMoney"
          slot-scope="{row}"
        >
          <el-link
            type="primary"
            @click="preview(row.lineGroup2_title3_diffUrl, row)"
          >{{row.lineGroup2_title3_diffMoney | rcaNumberFormat}}</el-link>
        </template>
        <!-- <template
          slot="searchMenu"
          slot-scope="{row,size}"
        >
          <el-button
            v-if="permissionList.export"
            @click="exportClick(row)"
          >导出</el-button>
        </template> -->
        <template slot="menuRight">
          <el-button
            type="primary"
            size="small"
            @click="delConfirm"
          >撤回</el-button>
          <el-button
            v-if="permissionList.export"
            @click="exportClick"
          >导出</el-button>
          <el-button
            v-if="permissionList.confirm"
            type="primary"
            size="small"
            @click="confirm()"
          >确认</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  confirm,
  delConfirm,
  dataExport
} from "@/api/rca/swckconfiirmprocessitvmepayment";
import { tableOption, startDate, endDate, tableDataFormat } from "@/const/crud/rca/swckconfiirmprocessitvmepayment";
import { mapGetters } from "vuex";
import { handleExcelResponse, getQueryString } from "@/util/util";
import { summaryMethod, rcaNumberFormat } from '@/const/crud/rca/common'
import Preview from "./components/Preview";


export default {
  name: "swckconfiirmprocessitvmepayment",
  components: {
    Preview,
  },
  filters: {
    rcaNumberFormat (val) {
      return rcaNumberFormat(val, true)
    }
  },
  data () {
    return {
      searchForm: {
        tradeDate: [startDate, endDate]
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      selection: [],
      listMap: [],
      previewTable: null,
      summaryMethod,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList () {
      return {
        confirm: this.vaildData(
          this.permissions.sw_ck_confiirm_process_itvm_epayment_confirm,
          false
        ),
        export: this.vaildData(
          this.permissions.sw_ck_confiirm_process_itvm_epayment_export,
          false
        )
      };
    }
  },
  methods: {
    async getList (page, params) {
      this.tableLoading = true;
      try {
        const { tradeDate = [], confirmStatus } = this.searchForm;
        const [startDate, endDate] = tradeDate;
        const response = await fetchList(
          Object.assign(
            {
              confirmStatus,
              startDate,
              endDate,
            },
          )
        );
        this.tableData = tableDataFormat(response.data.data);
        this.tableLoading = false;
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      } catch (e) {
        this.tableLoading = false;
      };
    },
    selectionChange (list) {
      this.selection = list.map(l => l.id);
      this.listMap = list;
    },
    preview (target, row) {
      const {
        lineGroup1_title1_diffUrl,
        lineGroup1_title2_diffUrl,
        lineGroup1_title3_diffUrl,
        lineGroup2_title2_diffUrl,
        lineGroup2_title3_diffUrl,
      } = row;
      const url = target
        ||
        lineGroup1_title1_diffUrl
        ||
        lineGroup1_title2_diffUrl
        ||
        lineGroup1_title3_diffUrl
        ||
        lineGroup2_title2_diffUrl
        ||
        lineGroup2_title3_diffUrl
      const importTime = getQueryString(url, 'importTime');
      const verfiyConfirmFlag = getQueryString(url, 'verfiyConfirmFlag');
      this.previewTable = {
        importTime,
        verfiyConfirmFlag,
        url
      }
    },
    async confirm () {
      if (!this.selection || !this.selection.length) {
        this.$message.error("请选择数据后再确认");
        return;
      }
      try {
        const res = await confirm(this.listMap);
        this.$message.success("操作成功");
        this.$refs.crud.selectClear();
        this.getList()
      } catch (e) {
        this.$message.error("操作失败");
      }
    },
    //撤回
    async delConfirm () {
      if (!this.selection || !this.selection.length) {
        this.$message.error("请选择已确认数据");
        return;
      }
      for(let i=0;i<this.listMap.length;i++){
        if(0 == this.listMap[i].confirmStatus){
          this.$message.warning("勾选数据中存在未确认数据！");
          return;
        }
      }
      try {
        const res = await delConfirm(this.listMap);
        this.$message.success("操作成功");
        this.$refs.crud.selectClear();
        this.getList()
      } catch (e) {
        this.$message.error("操作失败");
      }
    },
    async exportClick (row) {
      // await this.searchChange(row, () => { });
      this.dataExport();
    },
    async dataExport () {
      const { tradeDate = [] } = this.searchForm;
      const [startDate, endDate] = tradeDate;
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })
      try {
        const res = await dataExport(Object.assign({}, this.searchForm, { startDate, endDate }));
        // handleExcelResponse(res, `${startDate}至${endDate}ITVM支付导出.xlsx`);
        handleExcelResponse(res);
      } finally {
        loading.close();
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form };
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page);
    },
    searchReset () {

      this.page.currentPage = 1
      this.getList(this.page);
    },
  }
};
</script>
